<template>
	<view>
		<view class="headerTop">
			<!-- 基本信息 -->
			<view class="head-basic">
				<view class="top-msg">
					<view class=""></view>
					<text>基本信息</text>
				</view>
				<view class="equipment">
					<view class="state">
						<text class="text">业主单位</text>
						<text class="textData">{{equipmentList.owner || ''}}</text>
					</view>
					<view class="state">
						<text class="text">设备Ep编号</text>
						<text class="textData">{{equipmentList.epcode || ''}}</text>
					</view>
					<view class="state">
						<text class="text">设备状态</text>
						<text class="textData">-</text>
					</view>
					<view class="state">
						<text class="text">设备型号</text>
						<text class="textData">{{equipmentList.modelName || '暂无数据'}}</text>
					</view>
					<view class="state">
						<text class="text">出厂日期</text>
						<text class="textData">-</text>
					</view>
					<view class="state" v-if="equipmentList.eppEqModelMaker">
						<text class="text">制造商</text>
						<text class="textData">-</text>
						<!-- <text class="textData">{{equipmentList.eppEqModelMaker}}</text> -->
					</view>
					<view class="state namePlateImage" v-if="equipmentList.namePlate"
						@click="namePlateImage(equipmentList.namePlate)">
						<text class="text">设备铭牌</text>
						<image :src="equipmentList.namePlate" mode=""></image>

					</view>
				</view>

			</view>
			<!-- 主要参数 -->
			<view class="equipmentAuto" style="padding-top: 25rpx;"
				v-if="equipmentList.paramList && equipmentList.paramList.length!=0">
				<view class="top-msg">
					<view class=""></view>
					<text>主要参数</text>
				</view>
				<view class="" v-if="equipmentList.paramList && equipmentList.paramList.length">
					<view class="state" v-for="(item,index) in equipmentList.paramList" :key="index">
						<text class="text">{{item.paramName || ''}}</text>
						<text class="textData">{{item.paramValue || ''}}</text>
					</view>
				</view>
			</view>

			<!-- 设备附件 -->
			<view class="equipments" style="padding-top: 25rpx;"
				v-if="equipmentList.paramList && equipmentList.paramList.length!=0">
				<view class="top-msg">
					<view class=""></view>
					<text style="display: inline-block;">设备附件</text>
				</view>

				<view class="" style="margin-left: 60rpx;" @click="deviceAccessories"
					v-if="equipmentList.paramList && equipmentList.paramList.length">
					<image class="img" src="http://106.14.56.171:15016/images/materialDetail/pdf.png"></image>
					<view class="">
						<text style="font-size: 12px;">测绘图纸</text>
					</view>
				</view>
				<!-- 暂无数据页面 -->
				<view class="noneData" v-else>
					<image src="http://106.14.56.171:15016/images/images(4)(1)/images/noMessige.png" mode="">
					</image>
					<text>暂无数据...</text>
				</view>
			</view>

			<!-- bom清单 -->
			<view class="inventorys" @click="goInventoryBom">
				<view class="" style="display:flex;justify-content: space-between;">
					<view class="top-msg">
						<view></view>
						<text style="display: inline-block;">BOM清单</text>
					</view>
					<view class="aaa" style="position: absolute;right: 50rpx;">
						<uni-icons color="#666" type="forward" size="15" class="iocn">
						</uni-icons>
					</view>
				</view>
			</view>
			<view class="head-nav">
				<!-- 左侧红色图标 -->
				<view></view>
				<view @click="checkIndex(0)"> <text :class="navIndex==0?'activite':''">维修履历<text
							style="margin-left: 10rpx;">({{curriculum.length>=99?'99+':curriculum.length || '0'}})</text></text>
				</view>
				<view @click="checkIndex(1)"> <text :class="navIndex==1?'activite':''">同型号履历<text
							style="margin-left: 10rpx;">({{resuModel.length>=99?'99+':resuModel.length || '0'}})</text></text>
				</view>
			</view>
			<!-- 维修履历 -->
			<view class="principal" v-if="navIndex==0">
				<view class="principal-bottom" v-if="curriculum && curriculum.length">
					<view class="mainTenanceauto" v-for="(item,index) in curriculum" :key="index"
						@click="jumpProjectList(item)">
						<!-- 照片 -->
						<view class="mainTenance">
							<fileImage :src="item.path" :className="['cidental']" />
						</view>
						<!-- 内容 -->
						<view class="mainTenanceHistory">
							<!-- 项目名称 -->
							<view class="">
								<view class="sdfdf">
									<text>{{item.prjName}}</text>
								</view>
								<uni-icons color="#666" type="forward" size="15" top="10">
								</uni-icons>
							</view>
							<!-- 项目编号 -->
							<view><text class="size">项目编号</text><text class="daswenti">{{item.prjCode}}</text></view>
							<!-- 服务企业 -->
							<view class="enterpRise"><text class="size">服务企业</text><text
									class="daswenti">{{item.serviceSellerName}}</text>
							</view>
							<!-- 经理\施工负责人 -->
							<view><text style="margin-left: 130rpx;">{{item.prjManager}}</text><text
									style="margin-left: 20rpx;">{{item.prjTeamLeader}}</text></view>
							<!-- 时间 -->
							<view class="">
								<text class="size">完工时间</text>
								<text
									class="daswenti">{{item.actFinishTime?item.actFinishTime.slice(0,10):item.actFinishTime || ''}}</text>
							</view>
						</view>

					</view>
				</view>
				<view class="aaaa noneData" v-else>
					<image src="http://106.14.56.171:15016/images/images(4)(1)/images/noMessige.png" mode="">
					</image>
					<text>暂无数据…</text>
				</view>

			</view>
		</view>
		<!-- 同型号履历 -->
		<view class="principal" v-if="navIndex==1">
			<view class="principal-bottom" v-if="resuModel && resuModel.length">
				<view class="mainTenanceauto" v-for="(item,indx) in resuModel" :key="indx"
					@click="jumpProjectList(item)">
					<!-- 照片 -->
					<view class="mainTenance">
						<fileImage :src="item.path" :className="['cidental']" />
					</view>
					<!-- 内容 -->
					<view class="mainTenanceHistory">
						<!-- 项目名称 -->
						<view class="">
							<view class="sdfdf">
								<text>{{item.prjName}}</text>
							</view>
							<uni-icons color="#666" type="forward" size="15" top="10">
							</uni-icons>
						</view>
						<!-- 项目编号 -->
						<view><text class="size">项目编号</text><text class="daswenti">{{item.prjCode}}</text></view>
						<!-- 服务企业 -->
						<view class="enterpRise"><text class="size">服务企业</text><text
								class="daswenti">{{item.serviceSellerName}}</text>
						</view>
						<!-- 经理\施工负责人 -->
						<view><text style="margin-left: 130rpx;">{{item.prjManager}}</text><text
								style="margin-left: 20rpx;">{{item.prjTeamLeader}}</text></view>
						<!-- 时间 -->
						<view class="">
							<text class="size">完工时间</text>
							<text
								class="daswenti">{{item.actFinishTime?item.actFinishTime.slice(0,10):item.actFinishTime || ''}}</text>
						</view>
					</view>

				</view>
			</view>
			<view class="principal-bottom noneData" v-else>
				<image src="http://106.14.56.171:15016/images/images(4)(1)/images/noMessige.png" mode=""></image>
				<text>暂无数据…</text>
			</view>

		</view>
	</view>
	</view>
</template>

<script>
	import {
		Desensitized
	} from '../../config/desensitization.js'
	import fileImage from '@/components/fileImage/fileImage.vue'
	export default {
		data() {
			return {
				navIndex: 0, // 切换tabs页
				epCode: '',
				equipmentList: {},
				curriculum: {}, //维修履历
				resuModel: [] // 同型号履历

			}
		},
		components: {
			fileImage
		},
		onLoad(options) {
			console.log(options);
			this.epCode = options.epCode
			this.getEquipment() //维修履历
		},
		methods: {
			//切换tab页
			checkIndex(value) {
				this.navIndex = value;
			},
			getEquipment() {
				this.$http.get('api/EqEquipment/GetEqFiles?epCode=' + this.epCode).then(res => {
					this.equipmentList = res;
					console.log('生产日期', this.equipmentList);
					this.getcurriculum(this.equipmentList.fileId) //需要传一个ID值给维修履历
					this.resumeModel(this.equipmentList.fileId) //需要传一个ID值给同型号履历
				})
			},

			// 同型号履历
			resumeModel(id) {
				// console.log('同型号履历ID', id);
				this.$http.get('api/Project/GetProjectByEPCode?deviceId=' + id).then(res => {
					// console.log('同型号履历', res);
					this.resuModel = res
					this.resuModel = this.resuModel.map(code => {
						return {
							...code,
							prjTeamLeader: Desensitized.desensitizedName(code.prjTeamLeader),
							prjManager: Desensitized.desensitizedName(code.prjManager),

						}
					})
				})
			},
			// 维修履历
			getcurriculum(id) {
				// console.log('维修履历ID', id);
				this.$http.get('api/Project/GetProjectByDeviceId?deviceId=' + id).then(el => {
					// console.log('维修履历', el);
					if (Array.isArray(el) && el.length > 0) {
						el = el.map(code => {
							return {
								...code,
								prjTeamLeader: Desensitized.desensitizedName(code.prjTeamLeader),
								prjManager: Desensitized.desensitizedName(code.prjManager),

							}
						})
					}
					this.curriculum = el;
				})
			},
			// 设备附件
			deviceAccessories() {
				uni.showToast({
					title: '请线下联系索取',
					icon: 'none',
					duration: 2000
				});
			},
			goInventoryBom() {
				uni.navigateTo({
					url: './inventoryBom?epCode=' + this.equipmentList.epcode
				});
			},
			jumpProjectList(item) {
				console.log('-----------------------------');
				uni.navigateTo({
					url: './../project/project_detail/project_detail?id=' + item.prjInfoId
				})
			},
			// 点击查看铭牌
			namePlateImage(namePlate) {
				// console.log('---------', namePlate);
				uni.previewImage({
					current: 0,
					urls: [namePlate]
				})

			}
		}
	}
</script>

<style lang="less" scoped>
	.head-nav {
		width: 96%;
		margin-left: 2%;
		padding-bottom: 25rpx;
		background-color: #fff;
		border-radius: 15rpx 15rpx 0 0;
		display: flex;
		background-color: #fff;
		margin-top: 38rpx;

		>view {
			display: flex;
			justify-content: center;
			margin-top: 20rpx;
			width: 33%;
			font-weight: 500;

			>text {
				font-size: 30rpx;
				font-weight: 600;
			}
		}

		>view:nth-child(1) {
			margin-left: 20rpx;
			margin-top: 30rpx;
			width: 10rpx;
			height: 28rpx;
			background-color: #b5001e;
		}
	}

	.headerTop .head-basic {
		width: 96%;
		margin-left: 2%;
		margin-top: 38rpx;
		padding-bottom: 25rpx;
		background-color: #fff;
		border-radius: 15rpx;
		padding-top: 25rpx;
	}

	.equipment {
		width: 96%;
		margin-left: 2%;
		// margin-top: 30rpx;
		padding-bottom: 25rpx;
		background-color: #fff;
		border-radius: 15rpx;
	}

	// 主要参数
	.equipmentAuto {
		width: 96%;
		margin-left: 2%;
		margin-top: 34rpx;
		padding-bottom: 25rpx;
		background-color: #fff;
		border-radius: 15rpx;
	}

	.equipmentAuto .state .textData {
		display: inline-block;
		width: 70%;
		margin-left: 20rpx;
		text-align: left;
		font-size: 26rpx;
		color: #333333;
	}

	.equipmentAuto .state .text {
		text-align: right;
		display: inline-block;
		width: 25%;
		font-size: 26rpx;
		color: #999999;
	}

	// 设备附件
	.equipments {
		width: 96%;
		margin-left: 2%;
		margin-top: 34rpx;
		padding-bottom: 25rpx;
		background-color: #fff;
		border-radius: 15rpx;
	}

	// bom清单
	.inventorys {
		width: 96%;
		margin-left: 2%;
		margin-top: 30rpx;
		padding-bottom: 25rpx;
		background-color: #fff;
		border-radius: 15rpx;
		padding-top: 25rpx;
	}

	.top-msg {
		display: flex;
		align-items: center;

		>view {
			margin-left: 20rpx;
			width: 10rpx;
			height: 28rpx;
			background-color: #b5001e;
		}

		>text {
			font-size: 30rpx;
			margin-left: 20rpx;
			font-weight: 600;
		}
	}

	.top-msg image {
		width: 40rpx;
		height: 30rpx;
	}

	.namePlateImage {
		display: flex;
		// flex-direction: row;
		// align-items: center;
		// background-color: aqua
	}

	.state {
		padding: 10rpx 0 0 0;

		>image {
			margin-left: 20rpx;
			width: 180rpx;
			height: 100rpx;
		}
	}

	.equipment .state .textData {
		display: inline-block;
		width: 70%;
		margin-left: 20rpx;
		text-align: left;
		font-size: 12px;
	}

	.equipment .state .text {
		text-align: right;
		display: inline-block;
		width: 25%;
		font-size: 26rpx;
		color: #999999;
	}

	.icons {
		position: absolute;
		margin-left: -36px;
	}

	.img {
		width: 60rpx;
		height: 70rpx;
		margin-top: 4rpx;
		margin-left: 10rpx;
	}

	.principal {
		width: 96%;
		margin-left: 2%;
		padding-bottom: 25rpx;
		background-color: #fff;
		border-radius: 0 0 15rpx 15rpx;
		display: flex;
		align-items: center;
	}

	// 维修履历
	.mainTenanceauto {
		display: flex;
		align-items: center;
		margin: 20rpx 0 20rpx 0;
	}

	.size {
		font-size: 26rpx;
		color: #999999;
	}

	.daswenti {
		margin-left: 20rpx;
		font-size: 26rpx;
		color: #333333;
	}

	.mainTenanceHistory {
		width: 480rpx;
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;

		>view {
			font-size: 26rpx;
		}


		// 项目名称
		>view:nth-child(1) {
			width: 480rpx;
			display: flex;
			justify-content: space-between;

			.sdfdf {
				width: 400rpx;
				height: 40rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;

				>text {
					font-weight: 700;
					font-style: normal;
					font-size: 30rpx;
				}
			}
		}

		// 项目编号
		>view:nth-child(2) {
			width: 480rpx;
			margin-top: 10rpx;
		}

		// 服务企业
		>view:nth-child(3) {
			width: 480rpx;
			margin-top: 10rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		// 经理\施工负责人
		>view:nth-child(4) {
			width: 480rpx;
			margin-top: 10rpx;
		}

		// 时间
		>view:nth-child(4) {
			width: 480rpx;
			margin-top: 10rpx;
		}
	}

	// 项目详情下面的横杆
	.activite {
		color: #B4001E;
		font-size: 30rpx;
		font-weight: 600;
		padding-bottom: 10rpx;
		border-bottom: #B4001E solid 8rpx;
	}

	.aaaa {
		width: 100%;
		height: 100%;
	}

	// 暂无数据
	.noneData {
		margin: auto;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-around;

		>image {
			margin-right: 15rpx;
			width: 60rpx;
			height: 60rpx;
		}

		>text {
			margin-top: 20rpx;
			font-size: 26rpx;
		}
	}
</style>
<style lang="scss">
	.cidental {
		width: 160rpx;
		height: 180rpx;
		margin-left: 20rpx;
		border-radius: 10rpx;
	}
</style>
